
<template>
  <div class="dashboard">
    <a-skeleton :loading="loading" active>
      <top-bar />
      <div class="content">
        <div class="left-section">
          <profile-card
            :avatar="userAvatar"
            :signature="userSignature"
            :name="userName"
            :class-options="userClassOptions"
            class-placeholder="请选择您的班级"
            background-image="@/assets/bg.png"
            background-color="rgba(255, 255, 255, 0.8)"
            width="100%"
            height="100%"
          />
          <quick-start />
        </div>
        <div class="right-section">
          <leaderboard />
          <leaderboard />
        </div>
      </div>
    </a-skeleton>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import ProfileCard from './components/ProfileCard'
import QuickStart from './components/QuickStart'
import Leaderboard from './components/Leaderboard'
import useravatar from '@/assets/avatar.png'
// import { getUserData } from '@/utils/db'
import { message } from 'ant-design-vue'
export default {
  components: {
    ProfileCard,
    QuickStart,
    Leaderboard
  },
  setup() {
    const loading = ref(false)
    const userAvatar = ref(useravatar)
    const userSignature = ref('')
    const userName = ref('')
    const userClassOptions = ref([
      { value: '1', label: '2024级1班' },
      { value: '2', label: '2024级2班' },
      { value: '3', label: '2024级3班' },
      { value: '4', label: '2024级4班' }
    ])
    const importStatus = ref<{ message: string; type: string } | null>(null);

    const beforeUpload = (file: File) => {
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
                      file.type === 'application/vnd.ms-excel'
      if (!isExcel) {
        message.error('只能上传 Excel 文件！')
        return Upload.LIST_IGNORE
      }
      handleFile(file)
      return false 
    }

    const handleFile = async (file: File) => {
      loading.value = true
      try {
        const data = await parseExcelFile(file)
        // 插入每条学生数据
        for (const student of data) {
          const studentId = student['学号']
          const name = student['姓名']
          if (studentId && name) {
            await insertStudent(studentId, name)
          }
        }
        importStatus.value = { message: '学生数据导入成功！', type: 'success' }
        message.success('学生数据导入成功！')
      } catch (error) {
        importStatus.value = { message: '导入过程中发生错误，请重试。', type: 'error' }
        message.error('导入过程中发生错误，请重试。')
      } finally {
        loading.value = false
      }
    }

    const parseExcelFile = (file: File): Promise<any[]> => {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = (e) => {
          try {
            const data = new Uint8Array(e.target?.result as ArrayBuffer)
            const workbook = XLSX.read(data, { type: 'array' })
            const firstSheet = workbook.Sheets[workbook.SheetNames[0]]
            const jsonData = XLSX.utils.sheet_to_json(firstSheet)
            resolve(jsonData)
          } catch (err) {
            reject(err)
          }
        }
        reader.onerror = (err) => {
          reject(err)
        }
        reader.readAsArrayBuffer(file)
      })
    }
    return {
      loading,
      userAvatar,
      userSignature,
      userName,
      userClassOptions
    }
  }
}
</script>

<style scoped lang="less">
.dashboard {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  display: flex;
  flex: 1;
  gap: 20px;
  margin-top: 20px;
}

.left-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 20px;
}

.right-section {
  display: flex;
  flex-direction: column;
  flex: 2;
  gap: 20px;
}

.other-area {
  flex: 1;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 10px;
}
</style>
